<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>魔仙堡</title>

    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">

    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.min.css">

    <style type="text/css">
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;

        background: url(img/123.png) no-repeat;
        background-color: rgba(220, 220, 220, 0.5);
        /* background-size: 100% 100%; */
        /* background-size: cover; */
        /*  overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden; */
        width: 100%;
      }
.swiper-slide{
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
   -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;


  }

      .swiper-container {
        /* width: 50%; */
        height: 632px;
        margin: 50px;

      }
      .descr >p{
        font-size: 20px;
      }
      
      .fade {
        opacity: 0;
      }

      .show {
        opacity: 1;
      }

      * {
        margin: 0;
        padding: 0;
      }

      ol,
      ul {
        list-style-type: none;
      }

      a {
        color: #666;
        text-decoration: none;
      }

      .left {
        float: left;
      }

      .right {
        float: right;
      }

      #nav {
        height: 80px;
        background-color: #EEEEEE;
        /* background:url("img/111.png") no-repeat; */
        background-color: rgba(88, 88, 88, 0.3);
      }

      #nav li {
        float: left;
        margin: 0px 10px;
        line-height: 80px;
      }

      #nav ul {
        padding-left: 500px;
      }

      #nav li a {
        color: #fff;
        font-weight: bold;
      }

      #nav li a:hover {
        color: #fdd2ed;
      }

      #nav .logo>img {
        height: 60px;
        width: 60px;
        margin-top: 10px;
      }

      #nav .logo>p {
        height: 30px;
        width: 60px;
        margin-top: 10px;
      }

      .container {
        width: 100%;

        /*border:1px solid #f00;*/
        margin: 0px auto;
      }

      .container1 {
        width: 1280px;
        /*border:1px solid #f00;*/
        margin: 0px auto;
      }

      #sub{
        width:120px;
        height:40px;
        text-align:center;
        font-size: 14px;
        line-height: 40px;
        color: black;
        background-color:#fdd2ed;
        border-radius: 6px;
        border: 2px solid #eaeaea;
        margin-left: 80%;
    }

      

#comment {
     
      
  margin-top: 150px;
  padding-top: 20px;

      background-color: rgba(240, 255, 255, 0.5);

      border-radius: 10px;
    
   
    }
      #foot {
        text-align: center;
        margin: 10px;
        height: 80px;
        background-color: #474443;
        color: #FFFFFF;
        line-height: 80px;
     

      }

      #banner{
  height:430px;
  /* height:630px; */
  width:40%;
  margin: auto 0;
  }
.swiper-container{
  width: 300px;
  height: 400px;
        border-radius: 15px;

  }


  #ban{
  height:120px;
  /* height:630px; */
  width:100%;
  }
.fade{
  opacity:0;
  }
.show{
  opacity:1;  
  }
    </style>
  </head>
  <body>
    <div id="nav">
      <div class="container">
        <div class="logo left">
          <img src="img/222.png">
        </div>
        <div class="left left">
          <p style="color: #fff;margin-top: 15px;margin-left: 10px;font-size: 12px;">
            <b style="font-size: 18px;margin-right: 5px;">魔仙堡</b>
            MagicFairyCastle</p>
          <p style="color: #fff;margin-top: 5px;font-size: 14px;margin-left: 10px;">民 宿 订 购 网</p>
        </div>
        <ul class="right">
          <li><a href="indexlogin.php">首页</a></li>
          <li><a href="logintell.php">登录</a></li>
          <li><a href="registertell.php">注册</a></li>
          <li><a href="#">客服</a></li>
        </ul>
      </div>
    </div>
    <div id="ban"></div>
    <div id="banner"> 
      <div class="container1">
        
      
      
      <div class="swiper-container left left" style="margin-left: 100px;">
        <div class="swiper-wrapper" >
            <div class="swiper-slide">
              <img src="img/view1.jpg" width="600px;" height="630px">
            </div>
            <div class="swiper-slide">
              <img src="img/view2.jpeg" width="600px;" height="630px">
            </div>
            <div class="swiper-slide">
              <img src="img/view3.jpg" width="600px;" height="630px">
            </div>
            <div class="swiper-slide">
              <img src="img/view4.jpg" width="600px;" height="630px">
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="left left descr" 
    style="margin-top: 50px;height:400px;padding: 0 40px;width: 800px;
    background-color: rgba(240, 255, 255, 0.5);border-radius: 10px;">
      
            <h1>大榕树酒店</h1>
            <p>至尊花园私人泳池房</p>
            <p class="money">&yen;6666<span></span></p>
            <p>地址：海南省三亚市天涯区三亚湾路156号阳光棕榈湾小区</p>
            <form class="form-horizontal" style="margin-left: 5%;margin-right: 5%;" method="post" action="check_order_yh.php">
  				<div class="form-group"  >
   					<div class="col-sm-offset-2 col-sm-10" >
     				 	<input id="sub" type="submit" name="booking" value="预订" />
   					 	<br>
   			 		</div>
  				</div>
			</form>
            
    </div>
  </div>
  </div>



<div id="comment">
  

    <div style="margin-left: 10%"><h3>网站用户留言</h3></div>
    <div id="SOHUCS" sid="请将此处替换为配置SourceID的语句" style="width: 80%"></div>
    <script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script>
    <script type="text/javascript">
        window.changyan.api.config({
            appid: 'cyvbGdmaJ',
            conf: 'prod_184802c3d7f7d5f07177d4e95f7b4184'
        });
    </script>
    <div id="foot">
      <div class="container1">
        <p>
          <a href="javascript:;" id="btn">
            Copyright@2020The roject by
            <span style="color: #007AFF;">七魔仙_堡</span>
            .All Rights Reserved
          </a>
        </p>
      </div>
    </div> 
</div>
    <div class="totop">
      <a href="javascript:;" id="btn"></a>
    </div>


    <script type="text/javascript" src="js/swiper.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        var totop = document.getElementById("btn");
        totop.style.display = "none";
        var nav = document.getElementById("nav");
        var navTop = nav.offsetTop;

        var timer = null;
        totop.onclick = function() {
          timer = setInterval(function() {
            var backTop = document.documentElement.scrollTop || document.body.scrollTop;
            var speedTop = backTop / 5;
            document.documentElement.scrollTop = backTop - speedTop;
            if (backTop == 0) {
              clearInterval(timer);
            }
          }, 30);
        }
        var pageHeight = 700;
        window.onscroll = function() {
          var backTop = document.documentElement.scrollTop || document.body.scrollTop;
          if (backTop > pageHeight) {
            totop.style.display = "block";
          } else {
            totop.style.display = "none";
          }
          if (backTop >= navTop) {
            nav.style.position = "fixed";
            nav.style.top = "0";
            nav.style.left = "0";
            nav.style.zIndex = "100";
          } else {
            nav.style.position = "";
          }
        }
      }
    </script>
    <script type="text/javascript" src="js/swiper.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      $(window).scroll(function() {
        var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
        var backTop = $("#world").offset().top - $(window).height() / 1.2;
        if (scrollT > backTop) {
          $(".a1").addClass("animated bounceInRight show").removeClass("fade");
          $(".a2").addClass("animated bounceInDown show").removeClass("fade");
          $(".a3").addClass("animated bounceInUp show").removeClass("fade");
          $(".a4").addClass("animated bounceInLeft show").removeClass("fade");
        }
      });
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,


        speed: 1000,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        effect: 'fade', //  effect: 'flip',effect: 'coverflow',slide', 'fade',cube
        grabCursor: true,
        cube: {
          shadow: false,
          slideShadows: false,
          shadowOffset: 20,
          shadowScale: 0.94
        }
      });
    </script>


  </body>
</html>
